import React, { Component } from 'react'
import Tabtop from './Tabtop'
import Tabcont from './Tabcont'
import axios from '../utils/axios'

export class Main extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         list:[],
         i:0
      }
    }
    componentDidMount(){
        axios.get('/list').then(res=>{
            this.setState({
                list:res.data
            })
        })
    }
    changeindex(index){
        this.setState({
            i:index
        })
    }
    addtab(){
        let {list}=this.state
        list.push({
            id:new Date()*1,
            title:"新tab",
            cont:[]
        })
        this.setState({
            list
        })
    }
    removetab(id){
        let {list}=this.state
        list=list.filter((item)=>{
            return item.id!==id
        })
        this.setState({
            list
        })
    }
  render() {
      const {list,i}=this.state
      console.log(list);
    return (
      <div className='main'>
          <Tabtop
            list={list}
            i={i}
            changeindex={this.changeindex.bind(this)}
            addtab={this.addtab.bind(this)}
            removetab={this.removetab.bind(this)}
          ></Tabtop>
          <Tabcont
            cont={list[i]?list[i].cont:[]}
          ></Tabcont>
      </div>
    )
  }
}

export default Main